@import '@influxdata/clockface/dist/variables.scss';

.notebook-panel--body .flux-editor--monaco {
  position: relative;

  .react-monaco-editor-container {
    min-height: 100px;
  }
}

.query-results {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background-color: $g0-obsidian;
}

.query-results--pagination {
  background-color: $g2-kevlar;
  flex: 0 0 45px;
  height: 45px;
  display: flex;
  align-items: center;
}

.query-results--pagination-label {
  display: inline-block;
  margin-right: $cf-marg-b;
  color: $g13-mist;
  font-weight: $cf-font-weight--medium;
}

.query-results--pagination-button {
  margin-left: $cf-marg-b;
}

.query-results--container {
  flex: 1 0 0;
  position: relative;
}

.query-results--container .cf-dapper-scrollbars {
  border-bottom: $cf-border solid $g2-kevlar;
}

.query-results--container .cf-dapper-scrollbars--track-x {
  background-color: rgba($g3-castle, 0.5) !important;
}
